<template>
  <AdVxeModal
    v-bind="$attrs"
    @register="registerModal"
    :id="'message-receiver-modal'"
    :title="t('routes.system.message.messageReceiversText')"
    :cancelText="t('common.cancelText')"
    :close-func="handleClose"
    :okText="t('common.okText')"
    @ok="handleOk"
    width="50%"
  >
    <AdVxeTable @register="registerTable" :searchInfo="filterGroupRef" size="small" />
  </AdVxeModal>
</template>

<script lang="ts" setup>
  import type { PropType } from 'vue';
  import { ref } from 'vue';

  import { FilterOperateEnum } from '@/enums/filterOperateEnum';
  import { FilterRule, FilterGroup } from '#/request';

  import { AdVxeTable, useAdVxeTable } from '@/components/AdVxeTable';

  import { AdVxeModal, useModalInner } from '@/components/AdVxeModal';

  import { useI18n } from '@/hooks/web/useI18n';
  import { isFunction } from '@/utils/is';

  import { readMessageReceivers } from '@/api/message/admin/message';

  import { receiverColumns } from './message.data';

  defineOptions({ name: 'MessageReceiverModal' });
  const props = defineProps({
    /** 关闭回调，返回true关闭窗体 */
    closeFunc: {
      type: Function as PropType<(record: any) => Promise<boolean>>,
      default: null,
    },
    /** 确认回调，返回true关闭窗体 */
    okFunc: {
      type: Function as PropType<(record: any) => Promise<boolean>>,
      default: null,
    },
  });

  const { t } = useI18n();
  const recordRef = ref();
  const filterGroupRef = ref<FilterGroup>();

  //#region "加载状态"
  const loadingRef = ref(false);
  /** 开启加载状态 */
  function openLoading() {
    changeLoading(true);
    setModalProps({ okLoading: true, cancelLoading: true });
    loadingRef.value = true;
  }
  /** 关闭加载状态 */
  function closeLoading() {
    changeLoading(false);
    setModalProps({ okLoading: false, cancelLoading: false });
    loadingRef.value = false;
  }
  //#endregion

  const [registerTable, { reload: reloadTable }] = useAdVxeTable({
    // 表标题呈现器
    title: t('routes.system.message.message.receiverListText'),
    // 表格数据接口请求对象
    api: readMessageReceivers,
    // 表单列信息 BasicColumn[]
    columns: receiverColumns,
    // 使用搜索表单
    searchForm: true,
    // 是否显示表格边框
    border: false,
    // 是否显示序号列
    showSeqColumn: true,
  });

  const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(
    async (data) => {
      changeLoading(true);
      try {
        recordRef.value = data.record;
        // console.log('aa', data);

        filterGroupRef.value = new FilterGroup();
        const filterRule: FilterRule = new FilterRule(
          'MessageId',
          recordRef.value.Id,
          FilterOperateEnum.Equal,
        );
        filterGroupRef.value.Rules = [filterRule];

        await reloadTable();
      } finally {
        changeLoading(false);
      }
    },
  );

  /** 处理关闭按钮 */
  async function handleClose() {
    openLoading();
    const { closeFunc } = props;
    try {
      if (closeFunc && isFunction(closeFunc)) {
        const result = await closeFunc(recordRef.value);
        return result;
      }
    } finally {
      closeLoading();
    }
    return true;
  }
  /** 处理确定按钮 */
  async function handleOk() {
    openLoading();
    const { okFunc } = props;
    try {
      if (okFunc && isFunction(okFunc)) {
        const result = await okFunc(recordRef.value);
        if (result) {
          closeModal();
        }
      }
    } finally {
      closeLoading();
    }
    return true;
  }
</script>

<style lang="less" scoped></style>
